<!-- 注册证详情组件
 -->
<template>
  <div v-if="dialogVisible">
    <el-dialog
      append-to-body
      title="产品信息"
      @close="handleClose"
      :visible.sync="dialogVisible"
      :close-on-click-modal='false'
      :close-on-press-escape='false'>
      <el-form>
        <template v-for="(item, index) in registrationForm">
          <el-form-item
            :label="item.label"
            :prop="item.prop"
            :key="index"
          >
            <span>{{ formatFormData(formData)[item.prop] }}</span>
          </el-form-item>
        </template>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import ElEditable from '@components/el-editable'

const certificateDetail = '/guoke-channel-aggregation-center/api/v1/product/getCertificate'

const registrationForm = [
  { prop: 'certificateNo', label: '注册证编号' },
  { prop: 'registrantName', label: '注册人名称' },
  { prop: 'registrantAddress', label: '注册人住所' },
  { prop: 'productionAddress', label: '生产地址' },
  { prop: 'agentName', label: '代理人名称' },
  { prop: 'agentAddress', label: '代理人住所' },
  { prop: 'productNameCN', label: '产品名称' },
  { prop: 'specification', label: '型号、规格' },
  { prop: 'structureComposition', label: '结构及组成' },
  { prop: 'scopeUse', label: '适用范围' },
  { prop: 'dr', label: '其他内容' },
  { prop: 'remark', label: '备注' },
  { prop: 'approvalDate', label: '批准日期' },
  { prop: 'expireDate', label: '有效期至' },
  { prop: 'associationItems', label: '附件' },
  { prop: 'productStandards', label: '产品标准' },
  { prop: 'changeDate', label: '变更日期' }
]

export default {
  components: { ElEditable },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 注册证id
    cardId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      loading: false,
      tableData: [],
      dialogVisible: this.visible,
      registrationForm,
      formData: {}
    }
  },
  watch: {
    visible (val) {
      this.$nextTick(() => {
        this.dialogVisible = val
        val && this.getCardDetail()
      })
    }
  },
  methods: {
    // 查询注册证详情
    getCardDetail () {
      this.$axios.$get(certificateDetail, {
        params: {
          id: this.cardId
        }
      })
        .then(res => {
          this.formData = res.payload
        })
    },
    formatFormData () { // 可能需要处理一下接口数据，比如拼接多个字段为一个
      return this.formData
    },
    handleClose () {
      this.$emit('dialogClose', this.dialogVisible)
    }
  }
}
</script>
